<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>ZBUS Monitor</title>
<script type="text/javascript" src="zbus.js"></script>
<style>
table {
	font-family: "Helvetica Neue", Helvetica, sans-serif
}

caption {
	text-align: left;
	color: silver;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px;
}

thead {
	background: SteelBlue;
	color: white;
}

th, td {
	padding: 5px 10px;
}

tbody tr:nth-child(even) {
	background: WhiteSmoke;
}

tbody tr td:nth-child(2) {
	text-align: center;
}

tbody tr td:nth-child(3), tbody tr td:nth-child(4) {
	text-align: right;
	font-family: monospace;
}

tfoot {
	background: SeaGreen;
	color: white;
	text-align: right;
}

tfoot tr th:last-child {
	font-family: monospace;
}

#slogan {
	text-align: center;
	font: bold 24px arial, sans-serif;
	margin: 30px 30px;
}
</style>
</head>
<body>
	<h2 id="slogan" align="center">
		ZBUS = MQ + RPC <label id="broker" style="color: orange;"></label>
	</h2>

	<script type="text/javascript"> 
	var broker = new Broker("ws://localhost:15555/");
	function cbConsumer(){
		var c = new Consumer(broker, "MyMQ");
		
		c.createMq(function(data){ 
			c.take(function(res){
				var ta = document.getElementById('responseText');
				if(ta.value){
					ta.value = ta.value + "\n\n";
				} 
				ta.value = ta.value + res;
				ta.scrollTop = ta.scrollHeight;
			});
		}); 
	}
	broker.connect(cbConsumer);
	
	</script>
	<div align="center">
		<h3>Output</h3>
		<textarea id="responseText" style="width: 900px; height: 400px;"></textarea>
	</div>

	
</body>

</html>